import React, { PureComponent, StrictMode } from "react"
import { CSSTransition } from "react-transition-group"
import "./style.css"

export default class CpnCSSTransition extends PureComponent {
  constructor() {
    super()
    this.state = {
      isShow: false
    }
  }

  render() {
    const { isShow } = this.state
    return (
      // CSSTransition通过findDOMNode找节点的， 过时了，所以StrictMode告警
      <StrictMode>
        {/*timeout是决定类名什么时候添加和移除，而内部动画执行时效还是由你手写的css属性transition时间来控制*/}
        <CSSTransition
          in={isShow}
          unmountOnExit={true}
          classNames="preCssAAA"
          appear
          onEnter={(e) => console.log("开始进入动画")}
          onEntering={(e) => console.log("正在进入动画")}
          onEntered={(e) => console.log("执行进入结束")}
          onExit={(e) => console.log("开始离开动画")}
          onExiting={(e) => console.log("执行离开动画")}
          onExited={(e) => console.log("执行离开结束")}
          timeout={2000}
        >
          <p>显示</p>
        </CSSTransition>
        <button
          onClick={() => {
            this.setState({ isShow: !isShow })
          }}
        >
          切换
        </button>
      </StrictMode>
    )
  }
}
